<template>
  <div class="dis">
    <my-header></my-header>
    <div class="discount">
      <div class="banner">
        <img
          src="http://www.yhachina.com/images/exhibition/exhibition-banner4.jpg"
          alt=""
        />
      </div>

      <div class="box">
        <div class="explain">
          <h2>会员优惠</h2>
          <div class="explain_right">
            <a href="">会员优惠</a>
          </div>
        </div>

        <div class="bottom">
          <div class="left">
            <div class="left_bar">
              <div class="one">
                <div class="one_bar">
                  <div>
                    <img
                      src="http://www.yhachina.com/data/images/2020-05-25/5ecb6f054cce0.png"
                      alt=""
                    />
                  </div>
                  <h3>在遥远的西欧旅行，带上YHA会员卡更方便实惠</h3>
                </div>
              </div>

              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-27/5ece190f3ce6b.png"
                    alt=""
                  />
                </div>
                <h3>东欧这几个国家，满足你对童话之境的一切想象</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-27/5ece195622e44.png"
                    alt=""
                  />
                </div>
                <h3>一起去南欧感受地中海风情</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-22/5ec752d9c05d4.png"
                    alt=""
                  />
                </div>
                <h3>北欧消费水平高？带上YHA会员卡就可以打折啦！</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-22/5ec74bdfe393e.png"
                    alt=""
                  />
                </div>
                <h3>在德国、瑞士和奥地利感受童话世界</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-22/5ec747970609a.png"
                    alt=""
                  />
                </div>
                <h3>荷比卢不仅仅只有风车和巧克力，还有...</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-21/5ec6286458446.png"
                    alt=""
                  />
                </div>
                <h3>大洋洲 | 最好的户外活动体验在这里</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-21/5ec623ecca18e.png"
                    alt=""
                  />
                </div>
                <h3>北美五大湖区怎么玩最实惠？</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-21/5ec6219628e48.png"
                    alt=""
                  />
                </div>
                <h3>带上会员卡去享受南美的热情与浪漫</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2020-05-21/5ec621e5cc275.png"
                    alt=""
                  />
                </div>
                <h3>畅游东南亚，YHA会员卡让你省心又省钱</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2019-10-30/5db93a2a705d3.jpg"
                    alt=""
                  />
                </div>
                <h3>会员优惠| 台湾原来还有这些隐藏的地方等着你</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2019-10-30/5db938c00e43a.jpg"
                    alt=""
                  />
                </div>
                <h3>会员优惠第二辑 | 去了那么多次香港，竟不知道还有这些优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2019-10-30/5db90fa244d0d.jpg"
                    alt=""
                  />
                </div>
                <h3>会员优惠第一辑 | 全世界都在打折，你要pick哪一个？</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-28/5b34b83bac882.jpg"
                    alt=""
                  />
                </div>
                <h3>World Nomads世界游牧旅游保险95折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-28/5b34b7eaeb8ee.jpg"
                    alt=""
                  />
                </div>
                <h3>Eurosender快递服务9折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-28/5b34b7932f2fe.jpg"
                    alt=""
                  />
                </div>
                <h3>Doctor in Your Pocket口袋医生9折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-28/5b34b66b5786c.jpg"
                    alt=""
                  />
                </div>
                <h3>MyPostcard 75折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-27/5b3374a755ba6.png"
                    alt=""
                  />
                </div>
                <h3>Urban Adventures75折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-27/5b33686a41dbe.png"
                    alt=""
                  />
                </div>
                <h3>SANDEMANs桑德曼新欧洲旅行套餐75折优惠</h3>
              </div>
              <div class="one">
                <div>
                  <img
                    src="http://www.yhachina.com/data/images/2018-06-27/5b33554111c62.png"
                    alt=""
                  />
                </div>
                <h3>Hertz国际租车9折优惠</h3>
              </div>
            </div>
            <div class="much">没有更多数据</div>
          </div>
          <div class="right">
            <div class="block2">
              <a class="block2-a" href="">
                <i></i>
                旅舍预定
              </a>
              <a class="block2-b" href="">
                <i></i>
                会员卡
              </a>
              <a class="block2-c" href="">
                <i></i>
                旅舍加盟
              </a>
              <a class="block2-d" href="">
                <img
                  src="http://www.yhachina.com/data/images/2020-08-19/5f3cb08134015.jpg"
                  alt=""
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
export default {
  components: { MyHeader, MyFooter },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.discount {
  background-color: #f5f5f5;
}
.banner {
  img {
    display: block;
    width: 100%;
  }
}
.box {
  width: 1080px;
  //  height: 1030px;
  margin: 0 auto;
  position: relative;
  top: -60px;
  //    background-color: #f7941c;
  > .explain {
    width: 1080px;
    height: 100px;
    padding: 30px;
    margin-bottom: 60px;
    background-color: #fff;
    box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    > h2 {
      font-size: 30px;
      line-height: 100%;
      margin-bottom: 10px;
    }
    > div {
      display: inline;
      > a {
        background-color: #f7941c;
        display: inline-block;
        width: 110px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        text-decoration: none;
      }
    }
  }
  > .bottom {
    width: 1080px;
    //height: 1679px;
    display: flex;
    justify-content: space-between;
    > .left {
      width: 810px;
      // height: 1679px;
      // overflow: hidden;
      > .left_bar {
        // position: relative;
        // height: 1579px;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        // text-align: center;
        .one {
          width: 255px;
          margin: 0 6px 1em;
          background-color: #fff;
          // position: absolute;
          border-radius: 5px;
          padding: 14px;

          img {
            width: 100%;
            // height: 157px;
            padding-bottom: 1em;
          }
          h3 {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }

      > .much {
        line-height: 100px;
        text-align: center;
        font-size: 25px;
      }
    }
    > .right {
      width: 240px;
      height: 363px;
      padding-top: 2px;

      // background-color: #551a8b;
      .block2 {
        a {
          display: block;
          text-decoration: none;
          font-size: 18px;
          color: #fff;
          font-weight: bold;
          height: 80px;
          line-height: 80px;
          margin-bottom: 1px;
          background-image: url(../assets/img/jiantou.png);
          background-repeat: no-repeat;
          background-position: right 20px center;
          border-radius: 5px;
          &.block2-a {
            background-color: #87c524;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -389px -422px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-b {
            background-color: #f7941c;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -419px -422px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-c {
            background-color: #4b8fcc;
            // margin-bottom: 20px;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -476px -60px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-d {
            border: none;
          }
        }
      }
    }
  }
}
</style>
